<template>
	<view class="container">
		<block v-for="(sector,index) in sectorList" :key="index">
			<view class="sector-box">
				<view class="sector-title-box">
					<text class="sector-title">{{sector.title}}</text>
				</view>
				
				<u-grid col="4">
					<u-grid-item v-for="category in sector.categoryList" :key="category.id">
						<u-icon :label="category.title" labelPos="bottom" :name="category.icon" :size="40"></u-icon>
					</u-grid-item>
				</u-grid>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// icon可以是图片路径
				sectorList: [
					{
						id: '1',
						title: '招聘板块',
						categoryList: [
							{
								id: '101',
								title: '招聘',
								icon: 'photo'
							},
							{
								id: '102',
								title: '个人求职',
								icon: 'star',
							}
						]
					},
					{
						id: '2',
						title: '房屋板块',
						categoryList: [
							{
								id: '201',
								title: '房屋出租',
								icon: 'photo'
							},
							{
								id: '202',
								title: '房屋出售',
								icon: 'home'
							}
						]
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		padding: 20rpx;
		background-color: #F2F2F2;
	}
	
	.sector-box {
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		
		border-radius: 10rpx;
		border-bottom: 2px solid #ccc;
		
		.sector-title-box {
			padding-bottom: 20rpx;
			.sector-title {
				font-weight: 600;
				font-size: $uni-font-size-lg;
			}
		}
	}
</style>
